<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search-inner">
				<span class="iconfont icon-sousuo"></span>
				<input 
					type="text" 
					v-model="searchKeyword" 
					@input="onSearchInput"
					placeholder="请输入车型名称、品牌等关键词" 
					placeholder-style="color: #999;"
				/>
				<span v-if="searchKeyword" class="iconfont icon-guanbi" @click="clearSearch"></span>
			</view>
		</view>
		
		<!-- 汽车列表 -->
		<ul class="car-list cl">
			<li v-for="(item, index) in carList" :key="index" @click="goDetail(item)">
				<image :src="item.logo" mode="aspectFill"></image>
				<div class="shop-right">
					<p class="car-name">{{ item.brand }}、{{ item.name }}</p>
					<p class="car-info">VIN: {{ item.vin }}</p>
				</div>
				<span class="iconfont icon-you"></span>
			</li>
		</ul>
		
		<!-- 无数据提示 -->
		<view v-if="carList.length === 0 && !loading" class="empty-tip">
			<text>{{ searchKeyword ? '暂无匹配的车辆信息' : '请输入关键词搜索车辆' }}</text>
		</view>
	</view>
</template>

<script>
import common_config from '@/static/js/common.js';
var config = common_config.config;
var that;
var userInfo;

export default {
	data() {
		return {
			searchKeyword: '', // 搜索关键词
			carList: [], // 车辆列表数据
			loading: false, // 加载状态
			searchTimer: null, // 搜索防抖定时器
			if_login: false // 是否登录
		}
	},
	
	onLoad() {
		that = this;
		that.plusReady();
	},
	
	onShow() {
		// 页面显示时重置状态
		this.loading = false;
	},
	
	methods: {
		// 初始化
		plusReady() {
			var func1 = function() {
				that.no_login();
			}
			var func2 = function() {
				that.is_login();
			}
			common_config.common_if_login(func1, func2);
		},
		
		// 未登录
		no_login() {
			that.if_login = false;
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/index/login'
				});
			}, 1500);
		},
		
		// 已登录
		is_login() {
			that.if_login = true;
			userInfo = uni.getStorageSync('userInfo');
			userInfo = JSON.parse(userInfo);
			console.log("is_login===="+userInfo.token)
			that.searchCars();
		},
		
		// 实时搜索
		onSearchInput() {
			// 清除之前的定时器
			if (that.searchTimer) {
				clearTimeout(that.searchTimer);
			}
			
			// 防抖：100ms 后执行搜索
			that.searchTimer = setTimeout(() => {
				that.searchCars();
			}, 100);
		},
		
		// 搜索车辆
		searchCars() {
			const keyword = that.searchKeyword ? that.searchKeyword.trim() : '';
			
			// 如果搜索词为空，清空列表
			// if (!keyword) {
			// 	that.carList = [];
			// 	that.loading = false;
			// 	return;
			// }
			
			that.loading = true;
			
			
			uni.request({
				url: config.request_url + '/index/xiaoshou/load_cars?token='+userInfo.token,
				method: 'POST',
				header: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				data: {
					kw: keyword
				},
				success: (res) => {
					that.loading = false;
					const r = res.data || {};
					if (r.code == 200) {
						that.carList = r.data || [];
					} else {
						uni.showToast({
							title: r.msg || '搜索失败',
							icon: 'none'
						});
						that.carList = [];
					}
				},
				fail: (err) => {
					that.loading = false;
					uni.showToast({
						title: '网络异常',
						icon: 'none'
					});
					that.carList = [];
				}
			});
		},
		
		// 清空搜索
		clearSearch() {
			that.searchKeyword = '';
			that.carList = [];
		},
		
		// 点击车辆，直接跳转到下一页
		goDetail(item) {
			// 检查必要字段
			if (!item || !item.id || !item.name) {
				uni.showToast({
					title: '车辆信息不完整',
					icon: 'none'
				});
				return;
			}
			
			// 跳转到出售申请页面，传递真实数据
			uni.navigateTo({
				url: '/pages/sell/sell_apply?car_id=' + item.id + 
				     '&car_name=' + encodeURIComponent((item.brand || '') + '、' + (item.name || '')) +
				     '&image=' + encodeURIComponent(item.logo || 'https://kehu-1256834579.cos.ap-shanghai.myqcloud.com/yuanxiang/logo2.png')
			});
		}
	}
}
</script>

<style scoped>
@import url("../index/index.css");

page {
	background-color: #f4f4f4;
	height: 100%;
}

.content {
	background-color: #f4f4f4;
	min-height: 100vh;
	padding-bottom: 20rpx;
}

/* 搜索框样式 */
.search-box {
	padding: 20rpx 3%;
	background-color: #fff;
}

.search-inner {
	display: flex;
	align-items: center;
	background-color: #f4f4f4;
	border-radius: 36rpx;
	padding: 16rpx 30rpx;
}

.search-inner .icon-sousuo {
	font-size: 32rpx;
	color: #999;
	margin-right: 16rpx;
}

.search-inner input {
	flex: 1;
	font-size: 28rpx;
	border: none;
	background-color: transparent;
}

.search-inner .icon-guanbi {
	font-size: 32rpx;
	color: #999;
	margin-left: 16rpx;
	padding: 10rpx;
}

/* 车辆列表样式修正 */
.car-list li {
	position: relative;
}

.car-list li image {
	width: 200rpx;
	height: 120rpx;
	float: left;
}

.car-list li .shop-right {
	float: left;
	margin-left: 20rpx;
	width: 57%;
}

.car-list li .shop-right .car-name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
	margin: 0;
}

.car-list li .shop-right .car-info {
	color: #999;
	margin-top: 10rpx;
	font-size: 24rpx;
	margin: 0;
	margin-top: 8rpx;
}

.car-list li .iconfont {
	float: right;
	font-size: 48rpx;
	margin-top: 40rpx;
}

/* 无数据提示 */
.empty-tip {
	text-align: center;
	padding: 100rpx 0;
	color: #999;
	font-size: 28rpx;
}
</style>
